<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02隔行变色</title>
    <style>
        .box{
            width: 360px;
        }
        .box ul{
            line-height: 30px;
            list-style-type: none;
        }
        .box li span{
            margin: 8px;
        }
        .now{
            background-color: #aaa!important;
        }
    </style>
    <script>
        window.onload = function(){
            //获取所有li并遍历，隔行换颜色。
            var lis = document.getElementsByTagName("li");
            for(var i=0;i<lis.length;i++){
                if(i%2==0){
                    lis[i].style.backgroundColor = "#eee";
                }else{
                    lis[i].style.backgroundColor = "#ddd";
                }
                lis[i].onmouseover = function(){
                    //鼠标经过变颜色
                    this.className = "now";
                }
                lis[i].onmouseout = function () {
                    //鼠标划出变原来的样式
                    this.className = "";
                }
            }
        }
    </script>
</head>
<body>
<div class="box">
    <ul>
        <li><span>中国核建</span><span>增仓59199</span><span>13.35</span><span>9.97%</span></li>
        <li><span>中国核建</span><span>增仓59199</span><span>13.35</span><span>9.97%</span></li>
        <li><span>中国核建</span><span>增仓59199</span><span>13.35</span><span>9.97%</span></li>
        <li><span>中国核建</span><span>增仓59199</span><span>13.35</span><span>9.97%</span></li>
        <li><span>中国核建</span><span>增仓59199</span><span>13.35</span><span>9.97%</span></li>
        <li><span>中国核建</span><span>增仓59199</span><span>13.35</span><span>9.97%</span></li>
        <li><span>中国核建</span><span>增仓59199</span><span>13.35</span><span>9.97%</span></li>
        <li><span>中国核建</span><span>增仓59199</span><span>13.35</span><span>9.97%</span></li>
    </ul>
</div>
</body>
</html>